import React from 'react';
import Api from 'Utils/api';
import dialog from 'Utils/dialog';
import './../interactive.scss';

class DoubleDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      content: {}
    }
  }
  componentWillMount() {
    this.initData();
  }
  showState(state) {
    if (state === 0) {
      return {
        label: '未处理',
        color: '#F35E49'
      };
    } else if (state === 1) {
      return {
        label: '处理中',
        color: '#F1870B'
      };
    }
    return {
      label: '已处理',
      color: '#292929'
    };
  }
  initData() {
    const api = new Api({
      method: 'GET',
      path: `/randoms/user/${this.state.id}`,
      success: (json) => {
        this.setState({
          content: json
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  render() {
    const { content } = this.state;
    const state = content.state ? this.showState(content.state) : {};
    return (
      <div className="interactive-detail-page">
        <div className="header-wrap">
          历史预约详情
        </div>
        <div className="content-wrap">
          <div className="content-row">
            <div>商家名称：</div>
            <div>{ content.company_name || ''}</div>
          </div>
          <div className="content-row">
            <div>类别：</div>
            <div>{ content.type || ''}</div>
          </div>
          <div className="content-row">
            <div>回避人员：</div>
            <div>{ content.evade_executor || ''}</div>
          </div>
          <div className="content-row">
            <div>执法人员：</div>
            <div>{ content.law_executor1 || ''} { content.law_executor2 || ''}</div>
          </div>
          <div className="content-row">
            <div>检查内容：</div>
            <div>
              {
                content.content ? <span dangerouslySetInnerHTML={{ __html: content.content.replace(/\n/g, '<br/>') }} /> : ''
              }
            </div>
          </div>
          <div className="content-row">
            <div>状态：</div>
            <div style={{ color: state.color }}>{ content.state ? state.label : '' }</div>
          </div>
          <div className="content-row">
            <div>检查结果：</div>
            <div style={{ color: content.handle_result ? '#8FD57D' : '#F0BE4F' }}>
              { content.handle_result ? '合格' : '不合格'}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default DoubleDetail;
